<template>
  <!-- 导航栏 -->
  <van-nav-bar
      :title="title"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
  >
    <template #right>
      <van-icon name="search"/>
    </template>
  </van-nav-bar>
  <div id="content">
    <router-view></router-view>
  </div>
  <!-- tab栏 -->
  <van-tabbar route v-model="active">
    <van-tabbar-item icon="home-o" name="index" to="/">首页</van-tabbar-item>
    <van-tabbar-item icon="friends-o" name="team" to="/team">组队</van-tabbar-item>
    <van-tabbar-item icon="user-o" name="person" to="/person">个人</van-tabbar-item>
    <van-tabbar-item icon="manager-o" name="author" to="/author">作者</van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">
import {ref} from "vue";
import router from "../config/routes";

const active = ref('index');
const title = ref('伙伴匹配');

// 配置路由守卫
router.beforeEach((to, from) => {
  title.value = to.name as string
})
const onClickLeft = () => {
  router.back();
};

// 点击右侧图标事件
const onClickRight = () => {
  router.push({
    path: '/search'
  })
};
</script>

<style scoped>
#content {
  margin-bottom: 50px;
}
</style>